<template>
  <div class="el-scroll-box">
    <el-scrollbar>
      <div class="detail-wrapper">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top:10px">
          <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.text" :to="{ name: item.name }">{{ item.text }}</el-breadcrumb-item>
          <el-breadcrumb-item>正文</el-breadcrumb-item>
        </el-breadcrumb>
        <h4>
          专栏
        </h4>
        <div class="title-warpper">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <h4>
          标题
        </h4>
        <div class="title-warpper">
          <el-input
            v-model="form.title"
            :rows="6"
            type="textarea"
            placeholder="写下你遇到的问题，10字左右简单描述，更容易得到回答噢"
            maxlength="80"
            show-word-limit
          />
        </div>
        <h4>
          正文
        </h4>
        <!--富文本-->
        <div ref="tinymce-wrapper" class="tinymce-wrapper" style="height: 350px">
          <tinymce
            :id="Global.getGuid()"
            ref="tinymce"
            v-model="form.content"
            placeholder="一个好的提问：
                      1. 请优先使用搜索功能，可能类似问题已经得到回答；
                      2. 包含必要的操作环境、Server版本、错误信息等；
                      3.包含必要的代码或截图细节。"
          />
        </div>
        <div style="text-align: right;margin-top: 10px; margin-bottom:10px">
          <button class="save-btn" @click="submit">{{ !$route.params.id.includes('new_')?'修改':'提问' }}</button>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
// 引入富文本
import Tinymce from '@/components/Tinymce'
import Global from '@/../public/js/global'
// api

import { addCommunityList, getCommunityType, getThisCommunity, setCommunityList } from '@/api/blog'
export default {
  name: 'AskQuestions',
  components: { Tinymce },
  data() {
    return {
      Global,
      typeList: [],
      form: {
        title: '',
        type: '',
        content: ''
        // <p>一个好的提问</p>
        // <p>1. 请优先使用搜索功能，可能类似问题已经得到回答；</p>
        // <p>2. 包含必要的操作环境、Server版本、错误信息等；</p>
        // <p>3.包含必要的代码或截图细节。</p>
      },
      breadcrumbList: []
    }
  },
  created() {
    this.initWindow()
    const routerParams = this.$route.params
    if (!routerParams.id.includes('new_')) { // 获取问题详情
      this.getArticleInfoById()
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const breadcrumbList = []
      breadcrumbList.push({
        name: from.name,
        text: from.meta.title
      })
      vm.breadcrumbList = breadcrumbList
      // 刷新回显面包屑
      if (from.name) {
        window.sessionStorage.setItem('breadcrumbList', JSON.stringify(breadcrumbList))
      } else {
        const breadcrumbList = window.sessionStorage.getItem('breadcrumbList')
        if (breadcrumbList) {
          vm.breadcrumbList = JSON.parse(breadcrumbList)
        }
      }
    })
  },
  methods: {
    initWindow() {
      const vPar = new this.ParamArr()
      getCommunityType(vPar).then(vPar => {
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_forumtype'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['name'] = table.getValueByName('Name')
          node['desc'] = table.getValueByName('Desc')
          nodes.push(node)
          table.next()
        }
        this.typeList = nodes
        this.typeList.length && (this.form.type = this.typeList[0].id)
      })
    },
    getArticleInfoById() {
      const vPar = new this.ParamArr()
      vPar.setStr('PostID', this.$route.params.id)
      getThisCommunity(vPar).then(vPar => {
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_forumlist'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['type'] = table.getValueByName('Type')
          node['typeName'] = table.getValueByName('TypeName')
          node['createTime'] = table.getValueByName('CreateTime')
          node['lastTime'] = table.getValueByName('LastTime')
          node['createUser'] = table.getValueByName('CreateUser')
          node['userName'] = table.getValueByName('UserName')
          node['title'] = table.getValueByName('Title')
          node['content'] = table.getValueByName('Content')
          node['hot'] = table.getValueByName('Hot')
          node['replyNum'] = table.getValueByName('ReplyNum')
          node['collectNum'] = table.getValueByName('CollectNum')
          nodes.push(node)
          table.next()
        }
        if (nodes[0]) {
          const item = nodes[0]
          this.form.title = item.title
          const typeList = this.typeList.filter(it => it.id === item.type)
          typeList.length && (this.form.type = typeList[0].id)
          this.form.content = item.content
          this.$refs['tinymce'].setContent(item.content)
        }
      })
    },
    submit() {
      const vPar = new this.ParamArr()
      const { title, type, content } = this.form
      if (!title) return this.$message.warning('请输入标题')
      if (!type) return this.$message.warning('请选中类型')
      if (!content) return this.$message.warning('请输入内容')
      vPar.setStr('Title', title)
      vPar.setStr('Type', type)
      vPar.setStr('Content', content)
      if (!this.$route.params.id.includes('new_')) {
        vPar.setStr('ID', this.$route.params.id)
        setCommunityList(vPar).then(vPar => {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
        })
      } else {
        vPar.setStr('ID', this.Global.getGuid()) // 前端生成文章id
        addCommunityList(vPar).then(vPar => {
          this.$message({
            type: 'success',
            message: '提交成功'
          })
          // 清空md内容
          this.$refs.tinymce.setContent('')
          // 初始化表单
          this.form = { title: '', type: '', content: '' }

          this.$router.go(-1)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scroll-box {
  width: 100%;
  height: 100%;
  background-image: url('../../../assets/user/Main_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  .el-scrollbar {
    height:100%
  }
}
.detail-wrapper {
  width: 80%;
  margin: 0 auto;
}
.save-btn {
  margin-left: 5px;
  width: 120px;
  height: 30px;
  border: none;
  border-radius: 5px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
	background-color: #3d6dea;
	border-radius: 2px;
}
</style>
